<template>
  <div
    class="common-table"
    v-if="options"
  >
    <el-table
      style="width: 100%"
      :data="data"
      :max-height="options.height"
      :stripe="options.isStripe"
      :border="options.isBorder"
      :highlight-current-row="options.isHighlightCurrentRow"
      :row-style="options.rowStyle"
      :cell-style="options.cellStyle"
      :header-row-style="options.headerRowStyle"
      :header-cell-style="options.headerCellStyle"
      v-loading="options.isLoading"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column
        type="expand"
        fixed="left"
        v-if="expandColumn"
      >
        <template v-if="expandColumn.type == 'table'">
          <el-table
            :stripe="options.isStripe"
            :border="options.isBorder"
            :highlight-current-row="options.isHighlightCurrentRow"
            :row-style="options.rowStyle"
            :cell-style="options.cellStyle"
            :header-row-style="options.headerRowStyle"
            :header-cell-style="options.headerCellStyle"
          >
            <template v-for="column in expandColumn.columus">
              <el-table-column
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :sortable="column.hasSort"
                v-if="column.isShow"
              ></el-table-column>
            </template>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
        fixed="left"
        v-if="options.hasSelection"
      ></el-table-column>
      <el-table-column
        type="index"
        :label="options.lableIndex"
        width="55"
        fixed="left"
        v-if="options.hasIndex"
      ></el-table-column>
      <template v-for="column in columns">
        <el-table-column
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :sortable="column.hasSort"
          v-if="column.isShow"
          :filters="column.filters"
          :filter-method="column.filterMethod"
          :fixed="column.fixed"
        >
          <template slot="header">
            <template v-if="column.headerFormatter">
              <span v-html="column.headerFormatter()"></span>
            </template>
            <template v-else>
              <span>{{ column.label }}</span>
            </template>
          </template>
          <template slot-scope="scope">
            <template v-if="column.columnFormatter">
              <span v-html="column.columnFormatter(scope.row, column, scope.row[column.prop])"></span>
            </template>
            <template v-else>
              <span>{{ scope.row[column.prop] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        :label="actions.title"
        :width="actions.width"
        ref="fixedColumn"
        fixed="right"
        v-if="actions"
      >
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="(link, idx) in scope.row.links">
              <template v-if="idx < 2">
                <el-link
                  :key="link.label"
                  :underline="false"
                  :type="link.type"
                  v-if="link.handleLinkShow(scope.row)"
                  @click.native="link.handleLinkClick(scope.row)"
                >{{ link.label }}</el-link>
              </template>
            </template>
            <el-popover
              placement="bottom-end"
              trigger="hover"
              v-if="scope.row.links && scope.row.links.length > 2"
            >
              <ul class="operate-list-box">
                <template v-for="(button, ii) in scope.row.links">
                  <li
                    :key="button.label"
                    :style="{'color': button.color ? button.color : '#606266'}"
                    v-if="button.handleLinkShow(scope.row) && ii >= 2"
                    @click="button.handleLinkClick(scope.row)"
                  >{{ button.label }}</li>
                </template>
              </ul>
              <span
                slot="reference"
                class="more-operate"
              >···</span>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    options: {
      type: Object,
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    expandColumn: {
      type: Object,
      default: () => {}
    },
    actions: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileterArr: [],
      selection: [] // 多选框
    };
  },
  created() {
    this.$nextTick(() => {
      this.handleOperateButton();
    });
  },
  watch: {
    // 监听表格数据的变动
    data() {
      this.handleOperateButton();
    }
  },
  methods: {
    // 处理操作按钮-对隐藏的按钮进行过滤
    handleOperateButton() {
      this.data.map(item => {
        item.links = [];
        if (this.actions.links && this.actions.links.length) {
          this.actions.links.map(items => {
            if (items.handleLinkShow(item)) {
              item.links.push(items);
            }
          });
        }
      });
    },
    // 处理改变多选框
    handleSelectionChange(value) {
      this.selection = value;
      this.$emit('handleSelectionChange', value);
    },
    // 处理表格字段排序
    handleSortChange(column, prop, order) {
      this.$emit('handleSortChange', column, prop, order);
    }
  }
};
</script>

<style lang="scss" scoped>
.common-table {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-table {
  flex: 1;
}
::v-deep .el-table__body {
  width: 100% !important;
}
::v-deep .el-table__fixed-right-patch {
  box-sizing: content-box;
}
.el-link + .el-link {
  margin-left: 10px;
}
.operate-group {
  display: flex;
  align-items: center;
}
.more-operate {
  position: relative;
  top: 1px;
  display: block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #c0c4cc;
  transform: rotate(90deg);
  user-select: none;

  &:hover {
    color: var(--color-primary);
  }
}
.operate-list-box {
  li {
    display: flex;
    align-items: center;
    height: 34px;

    &:hover {
      cursor: pointer;
      background-color: #f0f0f0;
    }
  }
}

::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
</style>
